<template>
  <el-form ref="formRef" label-width="80px" :model="form" :rules="formRules">
    <!-- 第一行 -->
    <el-row>
      <el-col :span="8">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="form.username" size="small" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="工号">
          <el-input v-model="form.workNumber" size="small" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" size="small" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row>
      <el-col :span="8">
        <el-form-item label="部门" prop="departmentName">
          <el-cascader v-model="form.departmentName" :options="treeData" :props="casProps" size="small" style="width: 100%"></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker v-model="form.timeOfEntry" type="date" placeholder="" size="small" style="width: 100%"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select v-model="form.formOfEmployment" placeholder="" size="small" style="width: 100%">
            <!-- 循环渲染聘用形式的可选项 -->
            <el-option v-for="item in hireType" :key="item.id" :label="item.value" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 员工头像 -->
    <el-form-item label="员工照片">
      <!-- :before-upload 的触发时机是选择文件之后 -->
      <!-- 在 :before-upload 里面，可以判断文件的类型和文件的大小 -->
      <!-- action 是默认要把头像上传到的地址 -->
      <el-upload class="avatar-uploader" action="" :show-file-list="false" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" v-img-error :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <p class="tips">图片格式为 <strong>JPG/PNG/GIF</strong>，且大小在 <strong>2MB</strong> 内</p>
    </el-form-item>

    <!-- 按钮 -->
    <el-form-item>
      <el-button type="primary" size="mini" @click="updateInfo">保存更新</el-button>
      <el-button type="default" size="mini" @click="$router.go(-1)">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 按需导入接口
import { getEmpInfoAPI, updateEmpAPI } from '@/api/emp.js'
import empConst from '@/api/constant/employees.js'
import { getDepartListAPI } from '@/api/depart.js'
import { arr2Tree, uploadFile2COS } from '@/utils'

export default {
  name: 'PersonalDetail',
  data() {
    return {
      // 页面上展示的用户头像
      imageUrl: '',
      // 员工的基本信息，将来都存到这个对象中
      form: {},
      // 校验规则
      formRules: {
        username: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
        timeOfEntry: [{ required: true, message: '入职时间不能为空', trigger: 'change' }],
        formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'change' }]
      },
      // 聘用形式的可选项数组
      hireType: empConst.hireType,
      // data 中数据的初始值类型必须和最终的值类型保持一致
      // 遵守这条规则的好处：避免浏览器 console 面板报错（invalid props type...）
      treeData: [],
      // 级联选择器的配置项
      casProps: {
        expandTrigger: 'hover',
        checkStrictly: true,
        label: 'name',
        value: 'name'
      },
      // 要上传的头像文件
      avatarFile: null
    }
  },
  created() {
    this.initEmpInfo()
    this.initDepartList()
  },
  methods: {
    // 初始化员工的基本信息
    async initEmpInfo() {
      const result = await getEmpInfoAPI(this.$route.params.id)
      // 给表单对象赋值
      this.form = result.data
      // 给头像赋值
      this.imageUrl = result.data.staffPhoto
    },
    // 初始化部门的列表数据
    async initDepartList() {
      const result = await getDepartListAPI()
      this.treeData = arr2Tree(result.data.depts, '')
    },
    // 每当选择了要上传的头像，就会自动触发这个 beforeAvatarUpload 函数
    // 形参中的 file 就是我们选择的文件
    beforeAvatarUpload(file) {
      // 允许当作头像进行上传的图片类型
      const allowTypes = ['image/jpeg', 'image/png', 'image/gif']
      // 判断当前选择的文件类型，是否为允许的文件类型
      const isAllowType = allowTypes.includes(file.type)
      // 判断文件大小是否在 2M 之内
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isAllowType) {
        this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
        // 阻止 el-upload 自带的头像上传行为
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        // 阻止 el-upload 自带的头像上传行为
        return false
      }

      // 1. 把用户选中的文件，显示到页面上
      this.imageUrl = URL.createObjectURL(file)
      // 2. 把用户选中的文件，存储到 data 中，供上传时候使用
      this.avatarFile = file

      // 阻止 el-upload 自带的头像上传行为
      return false
    },
    // 更新用户的基本信息
    updateInfo() {
      // 1. 对表单进行验证
      // 2. 上传头像
      // 3. 更新用户基本信息
      // 4. 提示成功
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return

        // 证明选择了要上传的头像
        if (this.avatarFile) {
          // 需要调用文件上传的函数
          const uploadResult = await uploadFile2COS(this.avatarFile)
          // 把 COS 图片的访问地址，存储到 this.form 表单中
          this.form.staffPhoto = 'https://' + uploadResult.Location
        }

        // 把表单数据进行浅拷贝，防止修改到 this.form 这个表单所绑定的数据对象
        const form = { ...this.form }
        // 判断 departmentName 是否为数组
        if (Array.isArray(form.departmentName)) {
          // 需要把最后一项，当作部门名称
          form.departmentName = [...form.departmentName].pop()
        }

        // 调用接口，把 form 发给服务器
        await updateEmpAPI(form)
        this.$message.success('更新成功！')
        this.$router.back()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 在 less 中，样式穿透使用 /deep/ 语法 */
/* 在 scss 中，样式穿透使用 ::v-deep 语法 */
/* 在普通的 css 中，样式穿透使用 >>> 语法 */
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.tips {
  margin: 0;
  font-size: 12px;
}
</style>
